<template>
	<view class="container">
		<form @submit="onSubmit">
			<!-- 姓名 -->
			<view class="form-item">
				<label>姓名</label>
				<input v-model="formData.name" placeholder="请输入姓名" />
			</view>
			<!-- 性别 -->
			<view class="form-item">
				<label>性别</label>
				<input v-model="formData.sex" placeholder="请输入性别 (男/女)" />
			</view>
			<!-- 民族 -->
			<view class="form-item">
				<label>民族</label>
				<input v-model="formData.nation" placeholder="请输入民族" />
			</view>
			<!-- 出生日期 -->
			<view class="form-item">
				<label>出生日期</label>
				<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.birthday" />
			</view>
			<!-- 家庭住址 - 省市区 -->
			<view class="form-item">
				<label>家庭住址 - 省市区</label>
				<picker mode="region" @change="bindTimeChange">
					<input border="bottom" placeholder="请选择省市区" type="text" v-model="formData.address" />
				</picker>
			</view>
			<!-- 家庭住址 - 详细地址 -->
			<view class="form-item">
				<label>家庭住址 - 详细地址</label>
				<input v-model="formData.detailedAddress" placeholder="请输入详细地址" />
			</view>
			<!-- 身份证号 -->
			<view class="form-item">
				<label>身份证号</label>
				<input v-model="formData.id_card" placeholder="请输入身份证号" />
			</view>
			<!-- 身份证正面 -->
			<view class="form-item">
				<uni-file-picker v-model="formData.front" limit="1" title="上传身份证正面照片" @select="handleFileSelect">
				</uni-file-picker>
			</view>
			<!-- 身份证反面 -->
			<view class="form-item">
				<uni-file-picker v-model="formData.opposite" limit="1" title="上传身份证反面照片" @select="handleFileSelectFan">
				</uni-file-picker>
			</view>
			<!-- 提交按钮 -->
			<button form-type="submit" class="submit-btn">提交认证</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					name: '',
					sex: '',
					nation: '',
					birthday: '',
					address: '',
					detailedAddress: '',
					id_card: '',
					front: [],
					opposite: []
				},
				addressRegion: ''
			};
		},
		methods: {
			// 获取省市区
			bindTimeChange(e) {
				this.address = e.detail.value[0] + e.detail.value[1] + e.detail.value[2];
			},
			handleFileSelect(file) {
				if (file) {
					// 获取文件的临时路径
					const filePath = file.tempFilePaths[0];
					this.formData.front = filePath;
					uni.uploadFile({
						url: 'http://localhost:8080/file/upload',
						// 这里的 name 要和服务器端接收文件的字段名保持一致
						name: 'file',
						// 填写文件的临时路径
						filePath: filePath,
						success: (uploadFileRes) => {
							const res = JSON.parse(uploadFileRes.data);
							if (res.code === 200) {
								this.formData.front = res.data.url
								uni.showToast({
									title: '文件上传成功',
									icon: 'none'
								});
							} else {
								uni.showToast({
									title: '文件上传失败！',
									icon: 'error'
								});
							}
						}
					});
				}
			},
			handleFileSelectFan(file) {
				if (file) {
					// 获取文件的临时路径
					const filePath = file.tempFilePaths[0];
					this.formData.opposite = filePath;
					uni.uploadFile({
						url: 'http://localhost:8080/file/upload',
						// 这里的 name 要和服务器端接收文件的字段名保持一致
						name: 'file',
						// 填写文件的临时路径
						filePath: filePath,
						success: (uploadFileRes) => {
							const res = JSON.parse(uploadFileRes.data);
							if (res.code === 200) {
								this.formData.opposite = res.data.url
								uni.showToast({
									title: '文件上传成功',
									icon: 'none'
								});
							} else {
								uni.showToast({
									title: '文件上传失败！',
									icon: 'error'
								});
							}
						}
					});
				}
			},
			// 提交表单
			onSubmit() {
				// 这里可以添加表单验证逻辑
				console.log('提交的实名认证信息：', this.formData);
				// 可以在这里添加将数据发送到服务器的代码
				// uni.request({
				//   url: 'your_api_url',
				//   method: 'POST',
				//   data: this.formData,
				//   success: (res) => {
				//     console.log('提交成功：', res.data);
				//   },
				//   fail: (err) => {
				//     console.error('提交失败：', err);
				//   }
				// });
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #f4f4f4;
	}

	.form-item {
		margin-bottom: 20px;
	}

	label {
		display: block;
		margin-bottom: 5px;
		color: #333;
	}

	input {
		height: 80rpx;
		width: 100%;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		box-sizing: border-box;
		line-height: 80rpx;
	}

	.image-btn {
		padding: 8px 16px;
		background-color: #007aff;
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 14px;
	}

	.submit-btn {
		background-color: #007aff;
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		width: 500rpx;
		height: 100rpx;
		line-height: 100rpx;
	}
</style>